<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <div class="searchHotel-box">
      <div class="searchHotel-Item">
        <div class="searchHotel-Item-left">地点：</div>
        <div class="searchHotel-Item-text">北京市</div>
        <div class="searchHotel-Item-right">
          <img src="http://static-o2o.360buyimg.com/daojia/new/images/icon/location-eye@2x.png" class="position-ico"/>
          <div class="position-text">当前位置</div>
        </div>
      </div>
      <div class="searchHotel-Item">
        <div class="searchHotel-Item-left">时间：</div>
        <div class="searchHotel-Item-text">2024-05-20 至 2024-05-21</div>
      </div>
      <div class="searchHotel-Item">
        <div class="searchHotel-Item-left">我的附近：</div>
        <div class="searchHotel-Item-text">搜索关键字/位置/品牌/酒店名</div>
      </div>
      <div class="searchHotel-Item">
        <div class="searchHotel-Item-left">价格/星级：</div>
        <div class="searchHotel-Item-text">五星级</div>
      </div>
      <div class="searchHotel-btn">{{btntext}}</div>
    </div>
    <!-- <div class="location-box" v-if="datas.location_style == 1 || datas.location_style == 2">
      <div class="location-left">
        <i class="iconfont icon-order_locate"></i>
        <span>城市</span>
        <i class="iconfont icon-advertise-next"></i>
      </div>
      <div class="location-right" v-show="datas.show_search != 1">
        <i class="iconfont icon-all_search_2"></i>
        <span>{{datas.search_title}}</span>
      </div>
      <div v-if="datas.location_style == 2 && datas.show_search != 1" class="location-search">搜索</div>
    </div>

    <div class="location-box2" v-if="datas.location_style == 3">
      <div class="location-whole">
        <div class="location-left">
          <span>城市</span>
          <i class="iconfont icon-advertise-next"></i>
        </div>
        <div class="location-right" v-show="datas.show_search != 1">
          <i class="iconfont icon-all_search_2"></i>
          <span>{{datas.search_title}}</span>
        </div>
      </div>
    </div> -->

  </div>
</template>

<script>
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
				padding_top,
				padding_bottom,
				padding_left,
				padding_right,
        button_bg_color,
				button_color,
        button_title,
        button_border_radius
			} = this.datas;

			return `
        .component-${this.id} .searchHotel-box{
            background-color: ${preview_color.color || '#f8f8f8'};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            padding-left:${padding_left}px;
            padding-top:${padding_top}px;
            padding-right:${padding_right}px;
            padding-bottom:${padding_bottom}px;
        }
        .component-${this.id} .searchHotel-box .searchHotel-btn{
            background-color: ${button_bg_color};
            color:${button_color};
            border-radius:${button_border_radius}px;
        }
    `;
		}
	};

	export default {
		props: ['id', 'datas', 'styles'],
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
      btntext() {
        const btntext = this.datas.button_title;
				return btntext;
      }
		},

		methods: {
		},

		mounted() {
		}
	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }

  .searchHotel-box {
    width: 100%;
    height: auto;
    .searchHotel-Item{
      width: 100%;
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #ddd;
      position: relative;
      .searchHotel-Item-left{
        width: 80px;
        font-size: 14px;
        line-height: 45px;
        text-align: left;
        float: left;
        color: #333;
      }
      .searchHotel-Item-text{
        margin-left:80px;
        margin-right: 50px;
        font-size: 14px;
        line-height: 45px;
        text-align: left;
        color: #333;
      }
      .searchHotel-Item-right{
        width: 50px;
        position: absolute;
        top:0;
        right: 0;
        .position-ico{
          width: 16px;
          height: 16px;
          display: block;
          margin:7px auto 0;
        }
        .position-text{
          font-size: 12px;
          line-height: 20px;
          color: #47b34f;
          text-align: center;
        }
      }
    }
    .searchHotel-btn{
      width: 100%;
      height: 45px;
      line-height: 45px;
      text-align: center;
      margin-top:10px;
      font-size: 14px;
    }
  }

</style>
